import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    AsyncStorage,
    DeviceEventEmitter
} from 'react-native';
import Config from '../../common/Config'
import Utils from '../../common/Utils'
import {Toast,ModalIndicator} from 'teaset';
const {height, width} = Dimensions.get('window');
const STORAGE_KEY_TOKEN = '@AsyncStorageDemo:key_token';
export default class DetailsPage extends Component {
    componentDidMount() {
        this.msgListener = DeviceEventEmitter.addListener('refreshHome',(listenerMsg) => {
            this.getInfo();
        });
        this._loadInitialState().done();
    }
    componentWillUnmount() {
        this.msgListener&&this.msgListener.remove();
    }
    async _loadInitialState(){
        try{
            let value=await AsyncStorage.getItem(STORAGE_KEY_TOKEN);
            if(value!==null){
                this._appendMessage(value);
            }else{
                this._appendMessage('');
            }
        }catch(error){
            this._appendMessage('AsyncStorage错误'+error.message);
        }
    }
    _appendMessage=(message)=>{
        this.setState({
            token:this.state.token.concat(message)
        },()=>this.getInfo());
    };
    getInfo=()=>{
        let params={
            "token":this.state.token,
            "coverId":this.props.id
        };
        ModalIndicator.show("正在请求数据......");
        fetch(Config.baseApi+'/directories/getInfo',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status===0){
                    if(responseJson.data.remarkVO===null){
                        this.setState({
                            remarkName:null,
                            icon:null
                        })
                    }else {
                        if(responseJson.data.remarkVO.name!==null){
                            this.setState({
                                remarkName:responseJson.data.remarkVO.name
                            })
                        }
                        if(responseJson.data.remarkVO.label!==null){
                            this.setState({
                                icon:responseJson.data.remarkVO.label
                            })
                        }
                        if(responseJson.data.remarkVO.name===null){
                            this.setState({
                                remarkName:null
                            })
                        }
                        if(responseJson.data.remarkVO.label===null){
                            this.setState({
                                icon:null
                            })
                        }
                    }
                    this.setState({
                        head:responseJson.data.head,
                        area:responseJson.data.area,
                        name:responseJson.data.nickname,
                        status:responseJson.data.friend,
                        data:responseJson.data.remarkVO
                    })
                }else{
                    Toast.message(responseJson.msg);
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };
    constructor(props) {
        super(props);
        this.state = {
            token:'',
            head:'',
            area:'',
            remarkName:null,
            name:'',
            status:false,
            icon:null,
            data:null
        }
    };

    deleting=()=>{
        let params={
            "token":this.state.token,
            "coverId":this.props.id
        };
        ModalIndicator.show("正在请求数据......");
        fetch(Config.baseApi+'/directories/deleteFriend',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status===0){
                    alert(JSON.stringify(responseJson))
                }else{
                    Toast.message(responseJson.msg);
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <TouchableOpacity
                        onPress={()=>Actions.pop()&&DeviceEventEmitter.emit('refresherHead','aa')}
                        style={styles.goBackView}>
                        <Image
                            source={ImageUtil.WhiteGoBack}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                    <Text style={styles.titleMsg}>详细资料</Text>
                </View>
                <View style={styles.nameView}>
                    <Image
                        source={{uri:'http://118.31.37.236/upload/'+this.state.head}}
                        style={styles.headImg}/>
                    <View style={{marginLeft:23}}>
                        {this.state.remarkName!==null&&this.state.remarkName!=''
                            ?(<Text style={styles.nameMsg}>{this.state.remarkName}</Text>)
                            :(<Text style={styles.nameMsg}>{this.state.name}</Text>)}
                        <Text style={styles.introductionMsg}>信用号：{this.props.id}</Text>
                    </View>
                </View>
                <View style={styles.areaView}>
                    <Text style={{fontSize:14,marginLeft:15,color:'#000000'}}>所在地区</Text>
                    <Text style={{marginLeft:30,fontSize:14,color:'#000000',fontWeight:'200'}}>{this.state.area}</Text>
                </View>
                {this.state.icon!==null&&this.state.icon!=''
                ?(<TouchableOpacity
                        onPress={()=>Actions.ModifyNotesPage({id:this.props.id,label:this.state.icon})}
                        style={styles.remarksView}>
                        <Text style={{fontSize:14,marginLeft:15,color:'#000000'}}>标签</Text>
                        <Text style={styles.iconMsg}>{this.state.icon}</Text>
                        <Image
                            source={ImageUtil.Guide}
                            style={styles.remarkImg}/>
                    </TouchableOpacity>)
                :(<TouchableOpacity
                        onPress={()=>Actions.ModifyNotesPage({id:this.props.id})}
                        style={styles.remarksView}>
                        <Text style={{fontSize:14,marginLeft:15,color:'#000000'}}>设置备注和标签</Text>
                        <Image
                            source={ImageUtil.Guide}
                            style={styles.remarkImg}/>
                    </TouchableOpacity>)}
                {this.state.status
                    ?(<View>
                        <TouchableOpacity style={styles.addFriendButView}>
                            <Text style={{fontSize:15,color:'#ffffff'}}>发消息</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={()=>this.deleting()}
                            style={styles.deleteFriendButView}>
                            <Text style={{fontSize:15,color:'#000000'}}>删除联系人</Text>
                        </TouchableOpacity>
                    </View>)
                    :(<TouchableOpacity
                        onPress={()=>Actions.FriendVerificationPage({id:this.props.id,data:this.state.data})}
                        style={styles.addFriendButView}>
                            <Text style={{fontSize:15,color:'#ffffff'}}>添加好友</Text>
                        </TouchableOpacity>)}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        backgroundColor:'#000000',
        width:width,
        alignItems:'center',
        justifyContent:'center',
        height:64
    },
    titleMsg:{
        textAlign:'center',
        fontSize:17,
        color:'#ffffff',
        marginTop:34,
        marginBottom:29/2
    },
    goBackView:{
        position: 'absolute',
        top:65/2,left:15,
    },
    goBackImg:{
        height:18,
        width:18
    },
    headImg:{
        height:44,
        width:44,
        borderRadius:5,
        marginLeft:15
    },
    nameMsg:{
        fontSize:13,
        color:'#000000'
    },
    introductionMsg:{
        marginTop:13,
        fontSize:13,
        color:'#646464'
    },
    nameView:{
        height:68,
        width:width,
        alignItems:'center',
        flexDirection:'row',
        marginTop:15,
        backgroundColor:'#ffffff',
        borderTopWidth:1,
        borderBottomWidth:1,
        borderColor:'#e3e3e4'
    },
    areaView:{
        flexDirection:'row',
        height:46,
        borderTopWidth:1,
        borderBottomWidth:1,
        borderColor:'#e3e3e4',
        alignItems:'center',
        marginTop:15,
        backgroundColor:'#ffffff'
    },
    remarksView:{
        flexDirection:'row',
        height:46,
        borderTopWidth:1,
        borderBottomWidth:1,
        borderColor:'#e3e3e4',
        alignItems:'center',
        marginTop:15,
        backgroundColor:'#ffffff'
    },
    remarkImg:{
        position: 'absolute',
        right:15,
        height:17,
        width:17
    },
    addFriendButView:{
        marginTop:26,
        marginLeft:15,
        width:width-30,
        height:49,
        backgroundColor:'#3090dd',
        borderRadius:5,
        justifyContent:'center',
        alignItems:'center'
    },
    deleteFriendButView:{
        marginTop:18,
        marginLeft:15,
        width:width-30,
        height:49,
        backgroundColor:'#ffffff',
        borderRadius:5,
        justifyContent:'center',
        alignItems:'center',
        borderColor:'#646464',
        borderWidth:1
    },
    iconMsg:{
        position: 'absolute',
        left:100,
        fontSize:14,
        color:'#3090dd'
    }
});
